<!--
  功能：留言表单
  时间：2023年04月16日 21:36:41
-->
<template>
  <div class="page-bg">
    <an-table ref="tableRef" v-model="tableData" @getList="getList">
      <template #action>
        <div class="flex action">
          <div class="left">
            <el-popconfirm title="确定删除？" @confirm="delFn()">
              <template #reference>
                <el-button>批量删除</el-button>
              </template>
            </el-popconfirm>
          </div>
          <div class="right">
            <el-button @click="exportFn">导出execl表格</el-button>
          </div>
        </div>
      </template>
      <el-table-column prop="name" label="姓名" />
      <el-table-column prop="phone" label="手机" min-width="200" />
      <el-table-column prop="email" label="邮箱" min-width="200" />
      <el-table-column prop="notes" label="备注" />
      <el-table-column prop="create_time" label="提交时间" width="180" />
      <el-table-column fixed="right" label="操作栏" width="80" align="center">
        <template #default="scope">
          <el-popconfirm title="确定删除？" @confirm="delFn(scope.row)">
            <template #reference>
              <el-button link type="primary" size="small">删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </an-table>
  </div>
</template>

<script setup lang="ts">
import { post } from "@/common/http";
import anTable from "@/components/an-table.vue";
import { tableDataType, tableDataQuery } from "@/common/interface";
import { ElMessage } from "element-plus";
import dayjs from "dayjs";
import table2excel from "js-table2excel";

const tableRef = ref();

interface listItem {
  id: number;
  name: string;
  phone: string;
  email: string;
  notes: string;
  create_time: number;
}

//表格组件数据
const tableData = reactive<tableDataType<listItem>>(new tableDataType());

//获取列表
function getList(data: tableDataQuery): void {
  post("api/form/list_data", {
    page: data.page,
    limit: data.limit,
    prop: "id", //需要排序的字段
    sort: "desc", //desc asc
  }).then((res) => {
    tableData.lists = res.data.list.map((v: listItem) => {
      return {
        ...v,
        create_time: dayjs(v.create_time * 1000).format("YYYY-MM-DD HH:mm:ss"),
      };
    });
    tableData.total = res.total ?? 0;
    tableData.loading = false;
  });
}

//删除 / 批量删除
function delFn(item?: listItem) {
  let ids: number[] = [];
  if (item) {
    ids = [item.id];
  } else {
    if (tableData.checkItem.length) {
      ids = tableData.checkItem.map((v) => v.id);
    } else {
      return ElMessage.warning("请勾选需要操作的数据");
    }
  }
  post("api/form/del_data", { ids }).then(() => tableRef.value.reload());
}

//导出数据
function exportFn() {
  const column = [
    {
      title: "姓名",
      key: "name",
      type: "text",
    },
    {
      title: "手机",
      key: "phone",
      type: "text",
    },
    {
      title: "邮箱",
      key: "email",
      type: "text",
    },
    {
      title: "备注",
      key: "notes",
      type: "text",
    },
    {
      title: "添加时间",
      key: "create_time",
      type: "text",
    },
  ];
  table2excel(column, tableData.lists, "留言表单" + new Date().getTime());
}
</script>

<style scoped lang="scss">
.action {
  justify-content: space-between;
}
</style>
